<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取文本焦点</title>
    <style type="text/css">
        input{
            width: 300px;
            height: 36px;
            padding-left:5px;
            color:#ccc;
        }
        label{
            position:absolute;
            top:82px;
            left:56px;
            font-size:12px;
            color:#ccc;
            cursor:text;
        }
        .hide{
            display:none;
        }
        .show{
            display:block;
        }
    </style>
</head>
<body>
<!--文本获取焦点-->
京东：<input type="text" value="我是京东" id="inp1"/><br><br>
淘宝：<label for="inp2">我是淘宝</label><input type="text" id="inp2"/><br><br>
<!--改变不了占位字体颜色-->
placeholder: <input type="text" placeholder="我是placeholder">
<script>
    //京东获取焦点
    // 1.获取事件源
    // 2.绑定事件程序
    // 3.书写事件驱动程序
    var inp1=document.getElementById("inp1");
    inp1.onfocus=function(){
        if(this.value==="我是京东"){
            inp1.style.color="#000";
            inp1.value="";
        }
    }
    inp1.onblur=function(){
        if(this.value==="") {
            inp1.style.color="#ccc";
            this.value = "我是京东";
        }
    }
    //淘宝获取焦点
    //1.获取事件源（输入事件，无论删除还是输入都会驱动事件）
    //2.绑定事件程序
    //3.书写事件驱动程序
    var inp2=document.getElementById("inp2");
    var lab=document.getElementsByTagName("label")[0];
    //    inp2.focus();使文本框获取插入条光标
    inp2.oninput=function (){
        if(this.value===""){
            lab.className="show";
        }else{
            lab.className="hide";
        }
    }

</script>
</body>
</html>